<template>
  <div class="report-auto">
    <div class="home-content" :class="`home-content-${field.options.reportInfoConfig.reportType}`">
      <div class="header">
        <div class="left">
          <img src="@/components/assets/images/design/1-12.webp"/>
        </div>
        <div class="middle" :style="getStyle('content')"> {{field.options.reportInfoConfig.content}}</div>
        <div class="right">
          <img src="@/components/assets/images/design/1-12.webp"/>
        </div>
      </div>
      <div class="sub" v-if="true">
        <!--   刷卡   -->
        <img class="left" src="@/components/assets/images/design/payCard.webp" alt="刷卡"/>
        <!--   扫码   -->
        <img class="right" src="@/components/assets/images/design/payCode.webp" alt="扫码"/>
      </div>
      <div class="sup" v-if="true">
        <!--   插卡   -->
        <img class="left" src="@/components/assets/images/design/insertCard.webp" alt="插卡"/>
        <!--   磁条口   -->
        <img class="right" src="@/components/assets/images/design/patientCard.webp" alt="磁条口"/>
      </div>
      <div class="keyboard-button" @click="handleKeyboard">
        <span class="desc">手动输入就诊号</span>
        <van-icon name="arrow"/>
      </div>
    </div>

    <!--全键盘-->
    <el-drawer
        size="44%"
        title="就诊号"
        :withHeader="false"
        :show-close="false"
        :visible.sync="drawer"
        :direction="direction"
        custom-class="custom-keyboard"
        :modal-append-to-body="false"
        :before-close="handleClose">
      <div class="simple-keyboard-area" v-if="drawer">
        <CellGroup inset>
          <Field
              maxlength="18"
              v-model="value" class="input-area"
              label="就诊号/身份证号" label-align="top"
              placeholder="请输入就诊号"
          >
            <template #button>
              <van-button size="small" type="primary" @click="onKeyPress('{enter}')">确定</van-button>
            </template>

          </Field>
          <div class="error-info" v-if="errorShow">{{ errorInfo }}</div>
        </CellGroup>

        <SimpleKeyboard @keyboardClose="handleClose" ref="simpleKeyboard" @onChange="onChange" @onKeyPress="onKeyPress"
                        :input="value"/>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {Field, CellGroup} from 'vant';
import SimpleKeyboard from '@c/public/layer/scenes/simpleKeyboard/index.vue'
import {pxToVw} from "@/utils/common";

export default {
  name: 'ReportAuto',

  components: {
    CellGroup,
    Field,
    SimpleKeyboard
  },

  props: {
    field: {
      type: Object
    },
  },

  data() {
    return {
      drawer: false,
      value: '',
      errorShow: false,
      errorInfo: '就诊号/身份证不可以为空',
      direction: 'btt',
      timeout: null,
      timeoutDuration: 15  * 1000,  //10min
    }
  },

  computed:{
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.field?.options?.reportInfoConfig) || Array();
        let obj = Object();
        switch (val) {
          case 'content':
            Reflect.set(obj, "color", (info.fontColor));
            Reflect.set(obj, 'fontSize', pxToVw(info.fontSize));
            return obj;
        }
      }
    },
  },

  mounted() {
    //step5 监听页面操作，触发重置超时函数
    window.addEventListener("mousemove", this.resetTimeout);
    window.addEventListener("keydown", this.resetTimeout);
    window.addEventListener("click", this.resetTimeout);
    this.resetTimeout();
  },

  methods: {
    // 全键盘呼起时间
    handleKeyboard() {
      this.drawer = true
    },

    handleClose() {
      this.drawer = false;
      this.errorShow = false
      this.value = '';
    },

    // 隐藏键盘
    closekeyboard() {
      this.drawer = false;
      this.errorShow = false
      this.value = '';
    },

    // 点击事件
    onChange(val) {
      this.value = val
    },

    onKeyPress(button) {
      const self = this;
      this.errorShow = false
      if (button === "{enter}") {
        // 如果按确认键的相应操作
        if (self.value.trim().length > 0) {
          let params = Object();
          Reflect.set(params, 'number', (self.value));
          self.$emit('handleSubmit', params);
          self.handleClose();
        } else {
          this.errorShow = true;
          console.log('提示错误信息')
        }
      }
      if (button === "{bksp}") {
        // 删除键的相应操作
        console.log('bksp')
      }
    },

    onInputChange(val) {
      this.value = val.target.value;
    },

    resetTimeout() {
      if (!!(this.timeout)) {
        clearTimeout(this.timeout);
      }
      // 特定时间不做操作关闭抽屉-清空数据
      this.timeout = setTimeout(this.closekeyboard, this.timeoutDuration);
    },

  },

  destroyed() {
    window.removeEventListener("mousemove", this.resetTimeout);
    window.removeEventListener("keydown", this.resetTimeout);
    window.removeEventListener("click", this.resetTimeout);
  }
};
</script>


<style lang="scss" scoped>
.report-auto {
  height: 100%;
  width: 100%;


  .home-content {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;


    .header {
      text-align: center;
      font-weight: 500;
      font-size: 60px;
      color: #333333;
      padding: 42px 0;
      display: flex;
      justify-content: flex-end;

      .left {
        display: inline-block;
        width: 66px;
        height: 66px;
        align-self: center;
        position: relative;
        top: -20px;

        img {
          height: 100%;
          width: 100%;
          align-items: center;
          align-self: center;
        }
      }

      .middle {
        width: 400px;
        margin: 0 32px;
        font-size: 60px;
        color: #333333;
        line-height: 1.4;
        font-weight: normal;
        align-self: self-end;
        text-align: left;
        font-style: normal;
        @include fontWeight()
      }

      .right {
        display: inline-block;
        width: 66px;
        height: 66px;
        position: relative;
        top: -20px;
        align-items: center;
        align-self: center;

        img {
          height: 100%;
          width: 100%;
          align-items: center;
          align-self: center;
        }
      }
    }

    .sub {
      position: absolute;
      right: -6px;
      top: 410px;

      img {
        width: 326px;
      }

      .right {
        position: relative;
        left: -10px;
      }
    }

    .sup {
      position: absolute;
      right: -6px;
      top: 820px;

      img {
        width: 326px;
      }

      .right {
        position: relative;
        left: -10px;
      }
    }

    .keyboard-button {
      background: white;
      font-size: 42px;
      color: #1e90ff;
      line-height: 82px;
      border-radius: 100px;
      text-align: center;
      position: absolute;
      bottom: 130px;
      right: 42px;
      cursor: pointer;
      padding: 10px 110px;
      @include fontWeight();

      i {
        font-weight: bold;
      }
    }
  }

  .home-content-1{
    background: url('~@a/images/design/1-14×2.png') no-repeat bottom;
    background-size: cover;
    .sub {
      position: absolute;
      right: -6px;
      top: 460px;
    }

    .sup {
      position: absolute;
      right: -6px;
      top: 920px;
    }

    .keyboard-button {
      bottom: 50px;
      right: 42px;
    }
  }

  .home-content-2{
    background: url('~@a/images/design/1-13×2.png') no-repeat bottom;
    background-size: contain;
  }


}

:deep(.custom-keyboard) {
  .input-area {
    font-size: 48px;
    padding: 24px 0;

    margin-top: 70px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;

    .van-field__label {
      width: 100%;
      font-size: 42px;
      background: transparent;
      margin-bottom: 40px;
      padding: 0 20px;
      align-self: center;
    }

    .van-field__value {
      background: #EBEEF5;
      border-radius: 16px;
      overflow: hidden;
      padding: 0 0 0 24px;
    }

    .van-field__button {
      height: 110px;
      display: flex;
      padding-left: 0 !important;

      .van-button {
        height: 100%;
        overflow: hidden;
        border-radius: 8px;
        font-size: 48px;
        padding: 0 !important;
        background: #5cadff;
        width: 200px;
      }
    }
  }

  .error-info {
    font-size: 44px;
    color: #ed6a0c;
    border: none !important;
    background: transparent !important;
  }
}
</style>
